<template>
  <!-- BEGIN: Top Bar -->
  <div class="top-bar">
    <!-- BEGIN: Breadcrumb -->
    <nav aria-label="breadcrumb" class="-intro-x mr-auto hidden sm:flex">
      <!-- <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Application</a></li>
        <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
      </ol> -->
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item v-if="parentName">{{
            parentName
          }}
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="secondName">{{
            secondName
          }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </nav>
    <!-- END: Breadcrumb -->
    <!-- BEGIN: Search -->
    <div class="intro-x relative mr-3 sm:mr-6">
      <!--      <div class="search hidden sm:block">-->
      <!--        <input-->
      <!--          type="text"-->
      <!--          class="search__input form-control border-transparent"-->
      <!--          placeholder="Search..."-->
      <!--          @focus="showSearchDropdown"-->
      <!--          @blur="hideSearchDropdown"-->
      <!--        />-->
      <!--        <SearchIcon class="search__icon dark:text-slate-500" />-->
      <!--      </div>-->
      <!--      <a class="notification sm:hidden" href="">-->
      <!--        <SearchIcon class="notification__icon dark:text-slate-500" />-->
      <!--      </a>-->
      <div class="search-result" :class="{ show: searchDropdown }">
        <div class="search-result__content">
          <div class="search-result__content__title">Pages</div>
          <div class="mb-5">
            <a href="" class="flex items-center">
              <div
                  class="w-8 h-8 bg-success/20 dark:bg-success/10 text-success flex items-center justify-center rounded-full"
              >
                <InboxIcon class="w-4 h-4"/>
              </div>
              <div class="ml-3">Mail Settings</div>
            </a>
            <a href="" class="flex items-center mt-2">
              <div
                  class="w-8 h-8 bg-pending/10 text-pending flex items-center justify-center rounded-full"
              >
                <UsersIcon class="w-4 h-4"/>
              </div>
              <div class="ml-3">Users & Permissions</div>
            </a>
            <a href="" class="flex items-center mt-2">
              <div
                  class="w-8 h-8 bg-primary/10 dark:bg-primary/20 text-primary/80 flex items-center justify-center rounded-full"
              >
                <CreditCardIcon class="w-4 h-4"/>
              </div>
              <div class="ml-3">Transactions Report</div>
            </a>
          </div>
          <div class="search-result__content__title">Users</div>
          <div class="mb-5">
            <a
                v-for="(faker, fakerKey) in $_.take($f(), 4)"
                :key="fakerKey"
                href
                class="flex items-center mt-2"
            >
              <div class="w-8 h-8 image-fit">
                <img
                    alt="Midone Tailwind HTML Admin Template"
                    class="rounded-full"
                    :src="faker.photos[0]"
                />
              </div>
              <div class="ml-3">{{ faker.users[0].name }}</div>
              <div
                  class="ml-auto w-48 truncate text-slate-500 text-xs text-right"
              >
                {{ faker.users[0].email }}
              </div>
            </a>
          </div>
          <div class="search-result__content__title">Products</div>
          <a
              v-for="(faker, fakerKey) in $_.take($f(), 4)"
              :key="fakerKey"
              href
              class="flex items-center mt-2"
          >
            <div class="w-8 h-8 image-fit">
              <img
                  alt="Midone Tailwind HTML Admin Template"
                  class="rounded-full"
                  :src="faker.images[0]"
              />
            </div>
            <div class="ml-3">{{ faker.products[0].name }}</div>
            <div
                class="ml-auto w-48 truncate text-slate-500 text-xs text-right"
            >
              {{ faker.products[0].category }}
            </div>
          </a>
        </div>
      </div>
    </div>
    <!-- END: Search -->
    <!-- BEGIN: Notifications -->
    <!--    <Dropdown class="intro-x mr-auto sm:mr-6">-->
    <!--      <DropdownToggle-->
    <!--        tag="div"-->
    <!--        role="button"-->
    <!--        class="notification notification&#45;&#45;bullet cursor-pointer"-->
    <!--      >-->
    <!--        <BellIcon class="notification__icon dark:text-slate-500" />-->
    <!--      </DropdownToggle>-->
    <!--      <DropdownMenu class="notification-content pt-2">-->
    <!--        <DropdownContent tag="div" class="notification-content__box">-->
    <!--          <div class="notification-content__title">Notifications</div>-->
    <!--          <div-->
    <!--            v-for="(faker, fakerKey) in $_.take($f(), 5)"-->
    <!--            :key="fakerKey"-->
    <!--            class="cursor-pointer relative flex items-center"-->
    <!--            :class="{ 'mt-5': fakerKey }"-->
    <!--          >-->
    <!--            <div class="w-12 h-12 flex-none image-fit mr-1">-->
    <!--              <img-->
    <!--                alt="Midone Tailwind HTML Admin Template"-->
    <!--                class="rounded-full"-->
    <!--                :src="faker.photos[0]"-->
    <!--              />-->
    <!--              <div-->
    <!--                class="w-3 h-3 bg-success absolute right-0 bottom-0 rounded-full border-2 border-white dark:border-darkmode-600"-->
    <!--              ></div>-->
    <!--            </div>-->
    <!--            <div class="ml-2 overflow-hidden">-->
    <!--              <div class="flex items-center">-->
    <!--                <a href="javascript:;" class="font-medium truncate mr-5">{{-->
    <!--                  faker.users[0].name-->
    <!--                }}</a>-->
    <!--                <div class="text-xs text-slate-400 ml-auto whitespace-nowrap">-->
    <!--                  {{ faker.times[0] }}-->
    <!--                </div>-->
    <!--              </div>-->
    <!--              <div class="w-full truncate text-slate-500 mt-0.5">-->
    <!--                {{ faker.news[0].shortContent }}-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </DropdownContent>-->
    <!--      </DropdownMenu>-->
    <!--    </Dropdown>-->
    <!-- END: Notifications -->
    <!-- BEGIN: Account Menu -->
    <Dropdown class="intro-x w-8 h-8">
      <DropdownToggle
          tag="div"
          role="button"
          class="w-8 h-8 rounded-full overflow-hidden shadow-lg image-fit zoom-in"
      >
        <img
            alt="Midone Tailwind HTML Admin Template"
            src="@/assets/images/userIcon.jpg"
        />
      </DropdownToggle>
      <DropdownMenu class="w-56">
        <DropdownContent class="bg-primary text-white">
          <DropdownHeader tag="div" class="!font-normal">
            <div class="font-medium">{{ userName }}</div>
            <div class="text-xs text-white/70 mt-0.5 dark:text-slate-500">
              {{ unitName === null ? '-' : unitName }}
            </div>
          </DropdownHeader>
          <DropdownDivider class="border-white/[0.08]" v-if="companyFlag"/>
          <DropdownItem class="hover:bg-white/5" @click="editUnit" v-if="companyFlag">
            <ZapIcon class="w-4 h-4 mr-2"/>
            企业信息
          </DropdownItem>
          <DropdownDivider class="border-white/[0.08]"/>
          <DropdownItem class="hover:bg-white/5" @click="visible = true">
            <LockIcon class="w-4 h-4 mr-2"/>
            修改密码
          </DropdownItem>
          <DropdownItem class="hover:bg-white/5">
            <HelpCircleIcon class="w-4 h-4 mr-2"/>
            帮助
          </DropdownItem>
          <DropdownDivider class="border-white/[0.08]"/>
          <DropdownItem class="hover:bg-white/5" @click="logout">
            <ToggleRightIcon class="w-4 h-4 mr-2"/>
            退出登录
          </DropdownItem>
        </DropdownContent>
      </DropdownMenu>
    </Dropdown>
    <!--    <reset :visible="visible" @close="visible = false"/>-->
    <unitEdit :init="init" @close="close"/>
    <!-- END: Account Menu -->
  </div>
  <!-- END: Top Bar -->
</template>

<script setup>
import {ref, computed, watch, onMounted} from "vue";
import {ArrowRight} from "@element-plus/icons-vue";
import unitEdit from "./unitEdit.vue"
import reset from "@/components/reset/Main.vue"
// import { onBeforeRouteUpdate  } from "vue-router";
import {useRoute} from "vue-router";
import {useSideMenuStore} from "@/stores/side-menu";

const sideMenuStore = useSideMenuStore();
const route = useRoute();
const init = ref({});

const searchDropdown = ref(false);
const showSearchDropdown = () => {
  searchDropdown.value = true;
};
const hideSearchDropdown = () => {
  searchDropdown.value = false;
};
const menuList = ref([]);
const parentName = ref("");
const secondName = ref("");
const currentName = ref("");
const adminFlag = localStorage.getItem("adminFlag") === "true"; // 确保读取的是布尔值
const companyFlag = localStorage.getItem("companyFlag") === "true"; // 确保读取的是布尔值
const visible = ref(false);
const userName = ref(localStorage.getItem("userName"));
const unitName = ref(localStorage.getItem("unitName"));
onMounted(() => {
  menuList.value = sideMenuStore.menu;
  const titles = findTitleByPageName(menuList.value, route.name);
  parentName.value = titles.parentTitle;
  secondName.value = titles.secondTitle;
  currentName.value = titles.currentTitle;
});
// 递归查找三级菜单的title
const findTitleByPageName = (menu, pageName) => {
  for (const item of menu) {
    if (item.pageName === pageName) {
      return {currentTitle: item.title, secondTitle: "", parentTitle: ""};
    }
    if (item.subMenu) {
      for (const subItem of item.subMenu) {
        if (subItem.pageName === pageName) {
          return {
            currentTitle: subItem.title,
            secondTitle: item.title,
            parentTitle: "",
          };
        }
        if (subItem.subMenu) {
          const titles = findTitleByPageName(subItem.subMenu, pageName);
          if (titles.currentTitle) {
            return {
              currentTitle: titles.currentTitle,
              secondTitle: subItem.title,
              parentTitle: item.title,
            };
          }
        }
      }
    }
  }
  return {currentTitle: "", secondTitle: "", parentTitle: ""}; // 如果没有找到
};
// 退出登录
const logout = () => {
  console.log('退出');
  localStorage.clear();
  window.location.reload();
}
// 编辑电厂信息
const editUnit = () => {
  init.value = {
    isAdd: true
  }
}
// 监听route
// const name = computed(() => route.path);
watch(
    () => route.name,
    (newPath) => {
      const titles = findTitleByPageName(menuList.value, newPath);
      parentName.value = titles.parentTitle;
      secondName.value = titles.secondTitle;
      currentName.value = titles.currentTitle;
    }
);
</script>
